<template>
	<view class="main-page">
		<u-navbar title="个人资料" :autoBack="true"></u-navbar>
		<u-gap height="55" ></u-gap>
		<view class="form">
			<u--form labelPosition="left" :model="formData" labelWidth="80" :rules="rules" ref="uForm" >
				<u-form-item label="头像" prop="avator" borderBottom >
					<u-upload
						:fileList="images"
						@afterRead="afterRead"
						@delete="deletePic"
						name="file"
						:previewFullImage="true"
						:maxCount="1"
					></u-upload>
				</u-form-item>
				
				<u-form-item label="姓名" prop="name" borderBottom >
					<u--input v-model="formData.name" border="none" placeholder="请输入姓名"></u--input>
				</u-form-item>
				<u-form-item label="地址" prop="address" borderBottom >
					<u--input v-model="formData.address" border="none" placeholder="请输入地址"></u--input>
				</u-form-item>
				<u-form-item label="证件号" prop="id_card" borderBottom >
					<u--input v-model="formData.id_card" border="none" placeholder="证件号"></u--input>
				</u-form-item>
				<u-form-item label="联系电话" prop="mobile" borderBottom >
					<u--input v-model="formData.mobile" border="none" placeholder="请输入联系电话"></u--input>
				</u-form-item>
				<u-form-item label="职务" prop="duties" borderBottom >
					<u--input v-model="formData.duties" border="none" placeholder="请输入职务"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="btn-item">
			<u-button class="bg-linear-main" type="primary" shape="circle" text="确定" @tap="submit"></u-button>
		</view>
	</view>
</template>

<script>
	import { updateProfile } from '@/common/api.js'
	import upload from '@/common/upload.js'
	
	export default {
		data() {
			return {
				images: [],
				userInfo: this.$store.state.$userInfo,
				formData: {
					avatar: '',
					name: '',
					address: '',
					id_card: '',
					mobile: '',
					duties: '',
				},
				rules: {
					'name': {
						type: 'string',
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					},
					'mobile': [{
						required: true,
						message: '请输入联系电话',
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value, callback) => {
							return uni.$u.test.mobile(value);
						},
						message: '联系电话应该为11位手机号',
						trigger: ['change','blur'],
					}]
				},
			}
		},
		onLoad() {
			this.formData.avatar = this.userInfo.avatar
			this.formData.name = this.userInfo.staff.name
			this.formData.address = this.userInfo.staff.address
			this.formData.id_card = this.userInfo.staff.id_card
			this.formData.mobile = this.userInfo.staff.phone
			this.formData.duties = this.userInfo.staff.duties
			this.images = [{
				url: this.userInfo.avatar ? this.$store.state.$siteConfig.cdnUrl+this.userInfo.avatar : ''
			}]
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			async afterRead(event) {
				const file = event.file
				this.images.splice(0, 1, {
					...file,
					status: 'uploading',
					message: '上传中'
				})
				const result = await upload({filePath: file.url})
				this.images.splice(0, 1, {...file,status: 'success', message: '', url: result.file.url})
			},
			deletePic(event){
				this.images.splice(event.index, 1)
			},
			submit(){
				this.$refs.uForm.validate().then(res => {
					// uni.$u.toast('校验通过')
					const params = {...this.formData}
					params.avatar = this.images[0]['url']
					params.avatar = params.avatar.replace(this.$store.state.$siteConfig.cdnUrl, '')
					uni.showLoading()
					updateProfile(params).then(res => {
						uni.navigateTo({
							url: '/pages/user/orders'
						})
						this.$toast('修改成功!')
						let staff = this.userInfo.staff;
						staff.name = params.name;
						staff.address = params.address;
						staff.id_card = params.id_card;
						staff.phone = params.phone;
						staff.duties = params.duties;
						
						let userData = {
							avatar: params.avatar,
							nickname: params.name,
							staff: staff
						}
						this.$store.commit('setUser', userData)
					}).finally(() => {
						uni.hideLoading()
					})
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form { background-color: #ffffff; padding: 0 20rpx;}
	.btn-item { padding: 30rpx; }
</style>
